<template>
  <div class="image-grid">
    <div v-for="image in images" :key="image.id" class="image-item">
      <img :src="image.url" :style="getImageStyle" alt="Image">
    </div>
  </div>
</template>

<style>
.image-grid {
  column-count: 4;
  column-gap: 0;
  line-height: 0; /* 消除行高对图片之间的间距影响 */
}

.image-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5%;
  vertical-align: top; /* 图片在垂直方向上顶部对齐 */
}

@media (max-width: 1000px) {
  .image-grid {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .image-grid {
    column-count: 2;
  }
}

</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      images: []
    };
  },
  mounted() {
    this.downloadImages();
  },
  methods: {
    downloadImages() {
      // 用于存储所有请求的Promise数组
      const requests = [];
      const imageIds = [1, 2, 3,4,5,6,7,8,9,10,11]; // 替换为实际图片的id数组
      imageIds.forEach(id => {
        const request = axios({
          method: 'get',
          url: `http://localhost:8181/image/download/${id}`, // 替换为实际的后端接口地址
          responseType: 'blob'
        })
        .then(response => {
          // 创建一个可展示的URL
          const url = window.URL.createObjectURL(new Blob([response.data]));
          this.images.push({ id, url });
        })
        .catch(error => {
          console.error(`Error fetching image with id ${id}:`, error);
        });
        requests.push(request);
      });

      // 等待所有请求完成
      Promise.all(requests)
        .then(() => {
          console.log('All images downloaded successfully.');
        })
        .catch(error => {
          console.error('Error downloading images:', error);
        });
    }
  },
  computed: {
    getImageStyle() {
      const imageWidth = `${window.innerWidth / 4 - 10}px`; // 页面宽度的五分之一
      const imageHeight = `${window.innerWidth / 5}px`; // 页面宽度的五分之一
      return {
        width: imageWidth,
        //height: imageHeight
      };
    }
  }
};
</script>